網(wǎng)站制作中導(dǎo)航欄目在網(wǎng)站內(nèi)部跳轉(zhuǎn)實現(xiàn)方式
點(diǎn)擊導(dǎo)航欄目在頁面內(nèi)部跳轉(zhuǎn)；
在普通的html文檔中 ，頁面內(nèi)部的錨點(diǎn)跳轉(zhuǎn)，我們通常使用 a 標(biāo)簽<a href='#錨點(diǎn)Id'> </a>,同時在需要跳轉(zhuǎn)到的位置 ，要設(shè)置一個錨點(diǎn)（很形象的理解，漁船出海要停船了，防止漂走，首先要拋錨大笑），怎么設(shè)置錨點(diǎn),對應(yīng)的元素 id="錨點(diǎn)id",如法一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>紅寶書練習(xí)</title>
<style>
div{
width: 100%;
height: 500px;
border: 2px solid ;
background: orange;
}
</style>
</head>
<body>
<ul>
<li><a href="#div1">跳轉(zhuǎn)div1</a></li>
<li><a href="#div2">跳轉(zhuǎn)div2</a></li>
<li><a href="#div3">跳轉(zhuǎn)div3</a></li>
</ul>
<hr>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
這種方法的缺點(diǎn) 頁面的URL 會發(fā)生變化 如URL ：file:///C:/Users/31295/Desktop/html5實例/紅寶書練習(xí).html#div1，當(dāng)點(diǎn)擊上方<a>，頁面內(nèi)部跳轉(zhuǎn)，同時上方URL的標(biāo)紅部分也會發(fā)生變化 （這不是我們想要的）
方法二，在js事件中通過window.location.hash="divId" ，改變# 號后面的 值 但地址也會發(fā)生變化，感覺跟第一種方法沒區(qū)別，甚至更麻煩。
方法三，利用Element.scrollIntoView()方法，讓元素滾動到瀏覽器的窗口可視區(qū)域，先看下方法對應(yīng)的參數(shù)
element.scrollIntoView(align-top); // Boolean型參數(shù) element.scrollIntoView()默認(rèn)參數(shù)true;
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)
1.Element.scrollIntoView() 等同于 Element.scrollIntoView(true) 也即默認(rèn)值true,表示元素的頂端和瀏覽器可視區(qū)域的頂端對齊。
2.Element.scrollIntoView(false) 表示元素的底端和瀏覽器可視區(qū)域的底端對齊。
scrollIntoViewOptions(Object型參數(shù))
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "end",
}
1.block:"start" 相當(dāng)于true，block:"end" 相當(dāng)于false。
2.behavior能控制頁面跳轉(zhuǎn)的快慢 ，auto 和instant 都是立即直接跳轉(zhuǎn)到所在錨點(diǎn)，不夠友好，smooth表示平滑過渡到所在錨點(diǎn)。
在react應(yīng)用中，由于url 變化會觸及路由跳轉(zhuǎn)，所以第三種方法優(yōu)選，怎么寫呢?
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到錨點(diǎn)
let anchorElement = document.getElementById(anchorName);
//如果對應(yīng)的id錨點(diǎn)存在就跳轉(zhuǎn)
if (anchorElement) {
anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
}
}
<ul&
